<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能翻译助手</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <!-- 顶部导航 -->
    <div class="nav-tabs">
      <button class="tab-btn active" data-tab="favorites">收藏</button>
      <button class="tab-btn" data-tab="settings">设置</button>
      <button class="tab-btn" data-tab="history">历史</button>
    </div>





    <!-- 历史记录页面 -->
    <div class="tab-content" id="history-tab">
      <div class="history-section">
        <div class="section-header">
          <h3>翻译历史</h3>
          <div class="header-actions">
            <input type="text" id="history-search" placeholder="搜索历史记录..." class="search-input">
            <button id="export-history-btn" class="secondary-btn">导出CSV</button>
            <button id="clear-history-btn" class="danger-btn">清空历史</button>
          </div>
        </div>
        
        <div class="history-list" id="history-list">
          <!-- 历史记录将通过JavaScript动态加载 -->
        </div>
      </div>
    </div>

    <!-- 收藏夹页面 -->
    <div class="tab-content active" id="favorites-tab">
      <div class="favorites-section">
        <div class="section-header">
          <h3>我的收藏</h3>
          <div class="header-actions">
            <input type="text" id="favorites-search" placeholder="搜索收藏..." class="search-input">
            <button id="export-favorites-btn" class="secondary-btn">导出CSV</button>
            <button id="clear-favorites-btn" class="danger-btn">清空收藏</button>
          </div>
        </div>
        
        <div class="favorites-list" id="favorites-list">
          <!-- 收藏内容将通过JavaScript动态加载 -->
        </div>
      </div>
    </div>

    <!-- 设置页面 -->
    <div class="tab-content" id="settings-tab">
      <div class="settings-section">
        <div class="setting-group">
          <h3>基本设置</h3>
          
          <div class="setting-item">
            <label class="setting-label">
              <input type="checkbox" id="auto-translate-toggle">
              <span class="setting-text">启用自动翻译</span>
            </label>
            <p class="setting-desc">选中文本时自动显示翻译结果</p>
          </div>
        </div>

        <div class="setting-group">
          <h3>翻译服务</h3>
          
          <div class="setting-item">
            <label class="setting-label">选择翻译服务</label>
            <select id="translation-service" class="setting-select">
              <option value="bing" selected>Bing翻译</option>
              <option value="baidu">百度翻译 (免费100万字符/月)</option>
              <option value="chrome">Chrome内置翻译</option>
              <option value="tencent">腾讯翻译君 (免费100万字符/月)</option>
              <option value="google">Google翻译 (免费50万字符/月)</option>
              <option value="deepl">DeepL翻译 (免费50万字符/月)</option>
              <option value="youdao">有道词典 (免费)</option>
            </select>
          </div>
        </div>

        <div class="setting-group">
          <h3>API配置</h3>
          
          <!-- Google翻译配置 -->
          <div class="api-config" id="google-config" style="display: none;">
            <h4>Google翻译</h4>
            <div class="input-field">
              <label>API密钥</label>
              <input type="password" id="google-api-key" placeholder="输入Google翻译API密钥">
            </div>
            <div class="api-info">
              <p>获取方法：访问 <a href="https://cloud.google.com/translate" target="_blank">Google Cloud Console</a>，启用Cloud Translation API并创建API密钥</p>
            </div>
          </div>

          <!-- Chrome内置翻译配置 -->
          <div class="api-config" id="chrome-config" style="display: none;">
            <h4>Chrome内置翻译</h4>
            <div class="api-info">
              <p>无需配置API密钥，直接使用Chrome内置翻译功能</p>
            </div>
          </div>

          <!-- 百度翻译配置 -->
          <div class="api-config" id="baidu-config" style="display: none;">
            <h4>百度翻译</h4>
            <div class="input-field">
              <label>应用ID</label>
              <input type="text" id="baidu-app-id" placeholder="输入应用ID">
            </div>
            <div class="input-field">
              <label>密钥</label>
              <input type="password" id="baidu-secret-key" placeholder="输入密钥">
            </div>
            <div class="api-info">
              <p>获取方法：访问 <a href="https://fanyi-api.baidu.com" target="_blank">百度翻译开放平台</a>，注册并申请API</p>
            </div>
          </div>

          <!-- 腾讯翻译君配置 -->
          <div class="api-config" id="tencent-config" style="display: none;">
            <h4>腾讯翻译君</h4>
            <div class="input-field">
              <label>SecretId</label>
              <input type="text" id="tencent-secret-id" placeholder="输入SecretId">
            </div>
            <div class="input-field">
              <label>SecretKey</label>
              <input type="password" id="tencent-secret-key" placeholder="输入SecretKey">
            </div>
            <div class="api-info">
              <p>获取方法：访问 <a href="https://cloud.tencent.com/product/tmt" target="_blank">腾讯云</a>，开通机器翻译服务并获取密钥</p>
            </div>
          </div>

          <!-- DeepL翻译配置 -->
          <div class="api-config" id="deepl-config" style="display: none;">
            <h4>DeepL翻译</h4>
            <div class="input-field">
              <label>API密钥</label>
              <input type="password" id="deepl-api-key" placeholder="输入DeepL API密钥">
            </div>
            <div class="api-info">
              <p>获取方法：访问 <a href="https://www.deepl.com/pro-api" target="_blank">DeepL官网</a>，注册免费账号获取API密钥</p>
            </div>
          </div>

          <!-- Bing翻译配置 -->
          <!-- <div class="api-config" id="bing-config" style="display: none;">
            <h4>Bing翻译</h4>
            <div class="input-field">
              <label>API密钥</label>
              <input type="password" id="bing-api-key" placeholder="输入Bing翻译API密钥">
            </div>
            <div class="api-info">
              <p>获取方法：访问 <a href="https://azure.microsoft.com/zh-cn/services/cognitive-services/translator/" target="_blank">Microsoft Azure</a>，创建Translator资源</p>
            </div>
          </div> -->

          <!-- 有道翻译配置 -->
          <div class="api-config" id="youdao-config" style="display: none;">
            <h4>有道词典</h4>
            <div class="api-info">
              <p>使用有道词典API，无需配置API密钥，直接查询单词释义</p>
            </div>
          </div>
        </div>

        <div class="setting-actions">
          <button id="save-settings-btn" class="primary-btn">保存设置</button>
          <button id="test-api-btn" class="secondary-btn">测试API</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 模板 -->
  <template id="history-item-template">
    <div class="history-item">
      <div class="item-content">
        <div class="item-text">
          <div class="original-item"></div>
          <div class="translated-item"></div>
        </div>
        <div class="item-info">
          <span class="service-item"></span>
          <span class="time-item"></span>
        </div>
      </div>
      <div class="item-actions">
        <button class="favorite-item-btn" title="收藏">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
          </svg>
        </button>
        <button class="copy-item-btn" title="复制">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
          </svg>
        </button>
      </div>
    </div>
  </template>

  <template id="favorite-item-template">
    <div class="favorite-item">
      <div class="item-content">
        <div class="item-text">
          <div class="original-item"></div>
          <div class="translated-item"></div>
        </div>
        <div class="item-info">
          <span class="service-item"></span>
          <span class="time-item"></span>
        </div>
      </div>
      <div class="item-actions">
        <button class="edit-favorite-btn" title="编辑">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 20h9"/>
            <path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/>
          </svg>
        </button>
        <button class="copy-item-btn" title="复制">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
          </svg>
        </button>
        <button class="remove-favorite-btn" title="删除">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="3,6 5,6 21,6"></polyline>
            <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
          </svg>
        </button>
      </div>
    </div>
  </template>

  <script src="popup.js"></script>
</body>
</html> 